const { defineConfig } = require("@vue/cli-service");
const { resolve } = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require('terser-webpack-plugin');

module.exports = defineConfig({
  // 资源地图(防止上线被查看源代码)
  productionSourceMap: false,
  // 跨文件依赖项
  transpileDependencies: true,
  // //关闭语法检查
  // lintOnSave: false,
  devServer: {
    client: {
      overlay: false,
    },
    // port: 8090,
    // open: true
  },
  // 打包后的输出目录
  outputDir: 'dist',
  //  基本路径
  publicPath: "",
  //  放置静态资源的目录
  assetsDir: "static",
  // CSS加载器配置
  css: {
    extract: {
      filename: 'static/css/[name].[contenthash].css',
      chunkFilename: 'static/css/[name].[contenthash].css',
    },
  },
  configureWebpack: {
    performance: {
      // 关闭打包性能提示:设置为false
      hints: false,
      // hints: "warning",
      // 入口起点的最大体积
      maxEntrypointSize: 512000, // 512 kB
      // 生成文件的最大体积
      maxAssetSize: 512000, // 512 kB
      // 只给出 js 文件的性能提示
      // assetFilter: function (assetFilename) {
      //   return assetFilename.endsWith(".js") || assetFilename.endsWith(".css");
      // },
    },

    // 解决报错
    plugins: [
      new webpack.DefinePlugin({
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
      }),
      // 优化打包大小，改进性能
      new MiniCssExtractPlugin({
        filename: "static/css/[name].[contenthash].css", // 确保每个 CSS 文件都带有哈希值，避免缓存问题
        chunkFilename: "static/css/[id].[contenthash].css",
      }),
    ],
    // 优化打包大小，改进性能
    optimization: {
      minimize: true, // 启用压缩
      minimizer:[new TerserPlugin()],
      usedExports: true,
      splitChunks: {
        chunks: "all", // 对所有模块进行拆分
        maxSize: 200000, // 将文件拆分为不超过200KiB的大小
        minSize: 10000, // 设定文件拆分的最小大小
        cacheGroups: {
          styles: {
            name: "styles", // 拆分出的 CSS 文件命名为 styles
            test: /\.css$/, // 仅处理 CSS 文件
            chunks: "all", // 拆分所有 CSS
            enforce: true, // 强制应用此规则
            reuseExistingChunk: true, // 重用现有的chunk
          },
          vendors: {
            test: /[\\/]node_modules[\\/]/, // 针对node_modules中的库进行拆分
            name: "vendors", // 设置文件名称
            chunks: "all", // 对所有模块进行拆分
            priority: -10, // 设置优先级，优先拆分vendors
            reuseExistingChunk: true, // 重用现有的chunk
          },
          default: {
            minChunks: 1, // 至少有2个模块共享的部分才拆分
            priority: -20, // 设置较低的优先级
            reuseExistingChunk: true, // 重用现有的chunk
          },
        },
      },
    },
  },
  chainWebpack: (config) => {
    // 设置svg图标
    config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,
    config.module
      .rule("svg-sprite-loader")
      .test(/\.svg$/)
      .include.add(resolve("src/assets/svgIcon")) //处理svg目录
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      });
    // 设置路径别名
    config.resolve.alias
      .set("@p", resolve("./public"))
      .set("@", resolve("./src"));

    // 修改输出的 JS 文件路径
    config.output
      .filename('static/js/[name].[contenthash].js')
      .chunkFilename('static/js/[name].[contenthash].js');

    // 修改输出的 CSS 文件路径
    config.plugin('extract-css')
      .tap(options => {
        options[0].filename = 'static/css/[name].[contenthash].css';
        options[0].chunkFilename = 'static/css/[name].[contenthash].css';
        return options;
      });
  },
});
